<template>
    <div class="imports">
        <item-head title="批量导入" />
        <el-row class="form-body">
            <el-form ref="form" label-width="80px">
                <el-form-item class="no-bottom" label="步骤一：">
                    <span>下载批量导入模板</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="download">
                        点击下载模板
                    </el-button>
                </el-form-item>
                <el-form-item class="no-bottom" label="步骤二：">
                    <span>上传模板</span>
                </el-form-item>
                <el-form-item>
                    <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :on-success="success" :on-error="error" :file-list="fileList" :auto-upload="true" :before-upload="beforeAvatarUpload" :data="{accessToken:accessToken,type:type}">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
                    </el-upload>

                </el-form-item>
                <el-form-item v-if="showComplete" class="no-bottom" label="步骤三：">
                    <span>总条数{{total}}条，成功导入{{succNum}}条，导入完成</span>
                </el-form-item>
            </el-form>

            <el-form ref="form1" label-width="80px" v-if="showUploadComplete">
                <el-form-item class="no-bottom" label="步骤三：">
                    <span>总条数{{total}}条，成功导入{{succNum}}条，失败{{failNum}}条，需重新导入</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="downloadFail">
                        点击下载导入失败模板
                    </el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
// import {useImport} from 'service/user.ts'
import ItemHead from 'base/ItemHead.vue'
import io from 'api/io.js'
import storage from 'assets/js/storage'
import axios from 'axios'
@Component({
    name: 'imports',
    components: {
        ItemHead
    }
})
export default class Imports extends Vue {
    // dataGET 
    uploadUrl: string = io.dataImport
    // +'?accessToken='+storage.getAccessToken()
    accessToken: string = storage.getAccessToken()
    fileList: any[] = []
    type: string = ''
    showComplete: boolean = false
    showUploadComplete: boolean = false
    failNum: number = 0
    succNum: number = 0
    total: number = 0
    created() {
        this.type = this.$route.query.type
    }
    success(res: any, file: any, fileLsit: any[]) {
        console.log(res)
        if (res.success && res.data) {
            if (!res.data.failNum) {
                this.showComplete = true
            } else {
                this.showUploadComplete = true
            }
            this.failNum = res.data.failNum
            this.succNum = res.data.succNum
            this.total = res.data.total
        }else{
            this.$message('上传失败，请重新上传');
            (this.$refs.upload as any).clearFiles()
        }
    }
        async beforeAvatarUpload(file:any) {
            console.log('file',file)
            const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            const isLt500M = file.size / 1024 / 1024 < 500;

            if (!isExcel) {
                this.$message.error('只能上传excel格式!');
            }
            if (!isLt500M) {
                this.$message.error('文件大小不能超过 500MB!');
            }
            return isLt500M && isExcel;
        }
    error(res: any, file: any, fileLsit: any[]) {
        console.log(res,file)
    }
    download() {
        let userUrl='http://static.yuyou100.com/FkeT_dDcT9qYIMZAmtirBWxf5eHH?attname=%E7%94%A8%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx'
        let bookUrl='http://static.yuyou100.com/Fl6e5LIZCbBTvwTA5sQAMVeQteMz?attname=%E8%AF%8D%E5%BA%93%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx'
        let levelUrl='http://static.yuyou100.com/FgMLwfQDpXPISXAVLcuecBI-bAOl?attname=%E5%85%B3%E5%8D%A1%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx '
        let wordUrl='http://static.yuyou100.com/FrvGz90LII_t2n9dy0OxScsPrho9?attname=%E5%8D%95%E8%AF%8D%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx'
        if (this.type === '0') {
            (window as any).open(userUrl)
        } else if (this.type === '1') {
            (window as any).open(bookUrl)
        }else if (this.type === '2') {
            (window as any).open(levelUrl)
        }else if (this.type === '3') {
            (window as any).open(wordUrl)
        }
    }
    downloadFail() {
        (window as any).open(io.failedInfoExport + '?type=' + this.type + '&accessToken=' + this.accessToken)
    }
}
</script>

<style lang="stylus" scoped>
.no-bottom
    margin-bottom 0
.form-body
    background white
</style>
